<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/style.css" />
		<script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script>
		<script type="text/javascript" src="js/assist.js" ></script>
	</head>
	<body>
		<button id="reset">手动重置页面元素</button>
		<input type="checkbox" id="isreset" checked="checked" /><label for="isreset">点击下列按钮时先自动 重置页面</label><br /><br />
		<h3>基本选择器.</h3>
		<!‐‐ 控制按钮 ‐‐><input type="button" value="选择 id为 one 的元素." id="btn1" /> 
		<input type="button" value="选择 class 为 mini 的所有元素." id="btn2" /> 
		<input type="button" value="选择 元素名是 div 的所有元素." id="btn3" /> 
		<input type="button" value="选择 所有的元素." id="btn4" /> 
		<input type="button" value="选择 所有的span元素和id为two的元素." id="btn5" /> 
		<input type="button" value="选择span中id为two的元素." id="btn6" /> 
		<input type="button" id="btn7" value="停止动画" /><br /><br />
		<!‐‐ 测试的元素 ‐‐>
		<div class="one" id="one"> id为one,class为one的div
			<div class="mini">class为mini</div>
		</div>
		<div class="one" id="two" title="test"> id为two,class为one,title为test的div.
			<div class="mini" title="other">class为mini,title为other</div>
			<div class="mini" title="test">class为mini,title为test</div>
		</div>
		<div class="one">
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini"></div>
		</div>
		<div class="one">
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini" title="tesst">class为mini,title为tesst</div>
		</div>
		<!‐‐被隐藏了‐‐>
		<div style="display:none;" class="none">style的display为"none"的div</div>
		<!‐‐被隐藏了‐‐>
		<div class="hide">class为"hide"的div</div>
		<div> 包含input的type为"hidden"的div<input type="hidden" size="8" /> </div> 
		<span id="mover" style="background-image: url(img/5217.gif);">正在执行动画的span元素.</span> 
		<span id="two">span元素.</span> 
	</body>
	<script type="text/javascript">
		$(function(){					
			$("#btn1").click(function(){
				$("#one").css("background-color","red")
			})
			$("#btn2").click(function(){
				$(".mini").css("background-color","deeppink");
			})
			$("#btn3").click(function(){
				$("div").css("background-color","darkblue");
			})
			$("#btn4").click(function(){
				$("*").css("background-color","darkorange");
			})
			$("#btn5").click(function(){
				$("span,#two").css("background-color","yellow");
			})
			$("#btn6").click(function(){
				$("span#two").css("background-color","yellow");
			})
			$("#btn7").click(function(){
				$("span").stop();
			})
		})
		
	</script>
</html>
